大家好,我是 OXXO ( OXXO.STUDIO ),今年第 N 次參戰 iT 邦幫忙鐵人賽,我決定選擇了一個自己最熟悉、也最有熱情的主題:「關於那些有趣的 CSS 效果」,不過,我想這麼成熟的技術,可能沒有什麼人想寫了吧!( 苦笑 )
這幾年來,我在 OXXO.STUDIO 和 STEAM 教育學習網 裡撰寫了大量 CSS 教學,範圍涵蓋基礎排版、 RWD 到動畫與進階互動技巧,這次我將從自己撰寫的 200 多篇 CSS 教學文章中,精選出至少 30 個有趣的效果,逐篇進行重新整理、補充與發表,不需要任何 JS 或框架,只需要 CSS 和一點點勇氣,就能探索各種實用又奇幻的特效技巧。
效果預告:跑馬燈、電子時鐘、翻牌動畫、漸層色星空背景、雙色文字、流動邊框、探照燈動畫、水波紋、立體碼表、視差滾動、愛心爆炸 hover 效果、純 CSS 實作的進度條...等。
最近只要講起我在寫 CSS 教學,很多人就會說:「用 AI 就可以生成 CSS 了啊!」「還在寫 CSS,AI 就可以幫你寫啦!」沒錯,AI 確實能幫助我們快速產出可用的 CSS,特別是語法、基礎動畫、或是常見的 layout 排版,都可以輕鬆產生!
但是,身為一名和無數專案搏鬥過的前端工程師,我可以很負責任地說:
AI 寫 CSS 是輔助,但它不能代替你對畫面節奏與語意結構的理解。
視覺判斷力低,無法掌握畫面節奏
AI 無法「看見」實際畫面,也不知道你設計系統的畫面、對象、比例與色彩感受。
命名與結構鬆散,維護地獄的起點
AI 容易產出沒有語意的 class 結構,有時甚至完全不考慮命名規範、可維護性,或者目前使用的 CSS 架構
缺乏真實環境測試意識
AI 不知道不同瀏覽器或解析度的影響,也不知道各種字體 baseline 對 line-height 的差異 ( 特別是中日韓字體 ),更不會特別去處理多語系或無障礙需求。
過度保守,結果「堆疊」而非「設計」
AI 通常是「以防萬一」來寫 CSS ( 因為不知道使用情境 ),所以常常會加了一堆實際上不需要的樣式。
雖然講了很多 AI 的缺點,但對於撰寫過許多生成式 AI 教學的我來說,也想幫 AI 稍微平反一下,事實上,對於熟悉 CSS 的人而言,AI 是很棒的輔助工具,例如:
因此之前提到 AI 的缺點,其實反映了 AI 只是工具,AI 並不是並架構師或設計師,若我們已經知道要什麼、限制在哪裡,它就能幫我們省下不少時間,這時 AI 的定義就不是「能不能寫出完美 CSS」,而是「能不能幫我們省下體力、加快開發速度、讓我們更專注在細節」。
AI 不會取代你,但會讓懂 CSS 的人變得更強。
CSS 真正的強大不只是語法,而是「讓畫面有節奏、有呼吸感、有互動美學」的能力。這些並不是單靠生成語法就能達到的,而是需要對設計、排版、結構、可維護性都有一定程度的理解才能達成。
這次的鐵人賽,我希望能透過這 30 篇文章,重新發現 CSS 的樂趣、價值與潛力!
今天這篇是暖身介紹,明天開始會正式進入每日主題,歡迎大家一起留言交流、分享心得,明天見!😎
如果想了解更多 CSS 技巧,可以參考我寫的:CSS 教學大全